const tbody = document.querySelector('tbody');
function getScoreList() {
    axios.get('./score/list')
        .then(result => {
            if (result.data.code === 0) {
                const obj = result.data.data
                let html = ''
                for (const key in obj) {
                    const tempHTML = obj[key].score.reduce((h, v,i) =>
                       h+`<td class="score">${v}<input type='text' data-id=${key} data-batch=${i+1} /></td>`
                    , '')
                    html+=` <tr>
                    <th scope="row">${key}</th>
                     <td>${obj[key].name}</td>
                    ${tempHTML}  
                    </tr>`
                }
                tbody.innerHTML = html
                const inputs = document.querySelectorAll('input');
                inputs.forEach(input =>
                    input.addEventListener("blur", function () {
                        const data = {
                            "stu_id":input.dataset.id , 
 
                             "batch":input.dataset.batch, 
 
                              "score": input.value 
                        }
                        axios.post('/score/entry', data)
                            .then(result => {
                                if (result.data.code === 0) {
                                    toastr.success(result.data.message)
                                    getScoreList()
                            }
                        })
                    })
                )
    }
})
}
getScoreList()

tbody.addEventListener("dblclick", function (e) {
    const dom = e.target
    if (dom.nodeName === 'TD' && dom.classList.contains('score')) {
        const input = dom.querySelector('input')
        input.style.display = "block"
        input.value = dom.innerText
        input.focus()
    }
})